<template>
  <h1>ToDoList</h1>
  <el-input
    v-model="input"
    placeholder="Please input"
    @change="change"
    clearable
  />

  <h1>列表</h1>
  <div v-show="list.length==0">暂无数据</div>
  <div v-for="(i, index) in list" :key="index" v-show="list.length>0||list[index]">
    <el-checkbox v-model="i.checked" :label="i.input" size="large" @change="changeFlag(i)"/>
    <el-button @click="deleteItem(i)">delete</el-button>
  </div>
  <!-- <el-button @click="allChange()">allChange</el-button> -->
  <el-button @click="deleteTrue()">deleteTrue</el-button>
  
</template>
<script>
import { defineComponent, ref, reactive } from "vue";
import list from "./list.vue";
export default defineComponent({
  components: {
    list,
  },
  setup() {
    var list = reactive([]);
    var input = ref("");
    //添加
    function change(i) {
      list.push({
        input:input.value,
        flag:false
      });
      console.log(list);
    }
    //删除
    function deleteItem(i){
        console.log(i);
        var idx = list.findIndex(item=>{
            return i==item
        })
        console.log(idx);
        list.splice(idx,1)
    }
    //复选框选择
    function changeFlag(i){
        
        var idx = list.findIndex(item=>{
            return i==item
        })
        list[idx].flag = !list[idx].flag
    }
    //全选反选
    // function allChange(){
    //     var del = list.every(item=>{
    //         return item.flag == true
    //     })
    //     console.log(del);
    //     var srt = list.forEach((item,index,arr)=>{
    //         if(del==false){
    //             if(item.flag==false){
    //                 console.log(arr[index].flag);
    //                 arr[index].flag = true
    //                 console.log(arr[index].flag);
    //             }
    //         }else{
    //             arr[index].flag = true
    //         }
    //         return list
    //     })
    //     console.log(srt);
    //     console.log(list);
    // }
    //删除选择
    function deleteTrue(){
        var newList = reactive([])
        for(var i=0;i<list.length;i++){
            if(list[i].flag == false){
                newList.push(list[i])
            }
        }
        // list = list.filter(item=>{
        //     return item.flag == false
        // })
        console.log(newList);
        list = newList
        console.log(list);
    }
    return {
      list,
      input,
      change,
      deleteItem,
      changeFlag,
    //   allChange,
      deleteTrue
    };
  },
});
</script>

<style lang="scss">
</style>